<template>
  <div class="dashboard-container">
    <panel-group :countArr="amount" />

    <el-row class="line-chart">
      <line-chart :chart-data="chartData" :x-data="xData" @click-call-back="fetchPieData" color="#" />
    </el-row>

    <el-row class="line-chart" style="display: flex">
      <pie-chart :chart-data="pieData.套餐" title="套餐明细" color="#" />
      <pie-chart v-if="roles.includes('admin')" :chart-data="pieData.加油包" title="加油包明细" color="#" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup';
import PanelRow from './components/PanelRow';
import LineChart from './components/LineChart';
import PieChart from './components/PieChart';
import { dashboard, pieData } from '@/api/share';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    PanelRow,
    LineChart,
    PieChart,
  },

  data() {
    return {
      amount: {},
      // 图表
      xData: [],
      chartData: [],

      pieData: {
        套餐: [],
        加油包: [],
      },
    };
  },
  computed: {
    ...mapGetters(['roles']),
  },
  created() {
    this.fetchMainData();
    this.fetchPieData();
  },
  methods: {
    async fetchPieData(day) {
      const res = await pieData({
        start: day || dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        end: day || dayjs().format('YYYY-MM-DD'),
      });
      this.pieData = res.data;
    },
    async fetchMainData() {
      const res = await dashboard();

      this.amount = [
        {
          text: '今日激活单数',
          icon: 'chart',
          to: `/card/list?active_time=${dayjs().startOf('day').valueOf()},${dayjs()
            .add(1, 'day')
            .startOf('day')
            .valueOf()}`,
          num: res.data.amount.today_order,
        },
        {
          text: '今日分润金额',
          icon: 'money',
          to: `/share/list?time=${dayjs().startOf('day').valueOf()},${dayjs().add(1, 'day').startOf('day').valueOf()}`,
          num: res.data.amount.today_fee,
        },
        { text: '可领取分润', icon: 'dashboard', to: '/agent/list?mode=1', num: res.data.amount.withdraw },
        { text: '总激活单数', icon: 'chart', to: '/card/list', num: res.data.amount.total_order },
        { text: '总分润金额', icon: 'money', to: '/share/list', num: res.data.amount.total_shareprofit },
        { text: '待下发分润', icon: 'tree', to: '/agent/list?mode=2', num: res.data.amount.shareprofit },
      ];
      // x轴日期
      this.xData = res.data.statis.date;
      this.chartData = res.data.statis.chart;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;

    .line-chart {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    }
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
